// components/ListFooterStatus/index.tsx
import React from 'react';
import { View, Text } from '@tarojs/components';
import { Loading as VanLoading, Button as VanButton } from '@antmjs/vantui'; // 导入 Vant UI 组件

// 定义状态类型
export enum FooterStatus {
  Idle = 'idle', // 空闲，或者还有更多数据但当前未在加载
  Loading = 'loading', // 加载中
  NoMoreData = 'noMoreData', // 没有更多数据了
  Error = 'error', // 加载失败
}

export interface ListFooterStatusProps {
  status: FooterStatus;
  loadingText?: string;
  noMoreDataText?: string;
  errorText?: string;
  onRetry?: () => void; // 点击重试的回调
  // 可以添加更多自定义样式或属性
  style?: React.CSSProperties;
  className?: string;
}

const ListFooterStatus: React.FC<ListFooterStatusProps> = (props) => {
  const {
    status,
    loadingText = '加载中...',
    noMoreDataText = '没有更多数据了',
    errorText = '加载失败，请点击重试',
    onRetry,
    style,
    className,
  } = props;

  const renderContent = () => {
    switch (status) {
      case FooterStatus.Loading:
        return (
          <View
            style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '15px 0' }}
            className={className}
          >
            <VanLoading type='spinner' size='20px' textColor='#969799' vertical>
              {loadingText}
            </VanLoading>
          </View>
        );
      case FooterStatus.NoMoreData:
        return (
          <View style={{ textAlign: 'center', padding: '15px 0', color: '#969799', fontSize: '12px', ...style }} className={className}>
            <Text>{noMoreDataText}</Text>
          </View>
        );
      case FooterStatus.Error:
        return (
          <View style={{ textAlign: 'center', padding: '15px 0', color: '#ee0a24', fontSize: '12px', ...style }} className={className}>
            <Text>{errorText}</Text>
            {onRetry && (
              <VanButton
                type='primary'
                size='small'
                plain // 使用 plain 样式使其不那么突兀
                onClick={onRetry}
                style={{ marginTop: '8px', display: 'inline-block' }} // 让按钮显示在文本下方
              >
                重试
              </VanButton>
            )}
          </View>
        );
      case FooterStatus.Idle:
      default:
        return null; // 或者一个占位符 <View style={{ height: '40px' }} />
    }
  };

  return renderContent();
};

export default ListFooterStatus;
